<template>
  <div class="content list">
    <div class="item" @click="changeDefault">
      <div class="name">{{ messages.defaultRule }}</div>
      <el-switch :model-value="defaultEnabled"></el-switch>
    </div>
    <el-menu v-if="defaultOpenedList !== undefined" :default-openeds="defaultOpenedList" @close="handleClose" @open="handleOpen">
      <template v-for="item in rules" :key="item.name">
        <el-sub-menu v-if="item.children" :index="`g-${item.name}`">
          <template #title>{{
            item.name
            }}（<span style="color: #01d301; font-weight: bold">{{
                item.children.filter(item => item.selected).length
              }}</span>/{{ item.children.length }}）
          </template>
          <el-menu-item class="item" v-for="child in item.children" :index="child.name" @click="change(child)">
            <div class="name">{{ child.name }}</div>
            <el-switch :model-value="child.selected"></el-switch>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item class="item" v-else :index="item.name" @click="change(item)">
          <div class="name">{{ item.name }}</div>
          <el-switch :model-value="item.selected"></el-switch>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import {messages} from "../uses/useI18nMessage.js";
import {defaultEnabled, rules, init} from "../uses/useInit.js";
import {reload} from "../uses/useUtils.js";
import {bService, bContextMenu, bStorage} from '../api'
import {ref, watch, onBeforeMount} from "vue";

const WHISTLE_OPENED_GROUP_LIST_KEY = 'whistle-opened-group-list'

const defaultOpenedList = ref();

watch(defaultOpenedList, value => {
  bStorage.set(WHISTLE_OPENED_GROUP_LIST_KEY, value)
})
onBeforeMount(async () => {
  defaultOpenedList.value = (await bStorage.get(WHISTLE_OPENED_GROUP_LIST_KEY)) ?? []
})
const handleOpen = (key) => {
  defaultOpenedList.value = [...new Set([...defaultOpenedList.value ?? [], key])];
}

const handleClose = (key) => {
  defaultOpenedList.value = (defaultOpenedList.value ?? []).filter(item => item !== key);
}

const setEnable = async (item, enable) => {
  await bService.setRuleEnable(item, enable);
  await init();
  await reload();
  await bContextMenu.setMenu();
}
const change = (item) => {
  setEnable(item, !item.selected);
  bContextMenu.setMenu();
}
const changeDefault = async () => {
  await bService.changeDefaultRule(!defaultEnabled.value);
  await init();
  await reload();
  await bContextMenu.setMenu();
}
</script>

<style scoped lang="scss">
.list {
  :deep(.el-menu) {
    border-right: none
  }

  :deep(.el-sub-menu__title) {
    height: 32px;
    line-height: 24px;
    margin: 0;
    padding: 4px 10px !important;
  }

  .item {
    height: 28px;
    line-height: 20px;
    margin: 0;
    display: flex;
    box-sizing: border-box;
    cursor: pointer;
    padding: 4px 10px !important;

    &:hover {
      background: var(--el-menu-hover-bg-color)
    }

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .el-switch {
      width: 40px;
      margin-left: 20px;
      height: 20px;
    }

    .name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #606267;
      flex: 1;
    }
  }
}
</style>
